<template>
  <div class="inner-container">
    <p class="text" v-for="(text, index) in arr" :key="index">{{ text }}</p>
  </div>

</template>

<script>
import { logList } from '@/api'

export default {
  data () {
    return {
      arr: [],
    }
  },
  mounted () {
    this.init()
    setInterval(() => {
      // 发起请求获取数据
      this.init()
    }, 5000)
  },
  methods: {
    init () {
      logList({

      }).then(res => {
        if (res.code === 0) {
          this.arr = []
          res.data.forEach(item => {
            this.arr.push(item.message)
          })
        }
      })
    },

  }
}
</script>

<style scoped>
.inner-container {
  color: #4472c4;
  animation: myMove 6s linear infinite;
  animation-fill-mode: forwards;
}

/*文字无缝滚动*/
@keyframes myMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-40%);
  }
}

</style>
